<template>
  <div class="gridBox">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ff0000">
      <van-swipe-item >
        <van-grid class="grid" square :column-num="5" :border="false">
          <van-grid-item 
            v-for="value in list" 
            :key="value.id" 
            :icon="value.img" 
            :text="value.title" />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid square :column-num="5" :border="false">
          <van-grid-item 
            v-for="value in list" 
            :key="value.id" 
            :icon="value.img" 
            :text="value.title" />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
  

 
</template> 
<script setup lang="ts">
const list = [
  { id: 1, title: '京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 2, title: '数码电器', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 3, title: '京东百货', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 4, title: '京东生鲜', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
  { id: 5, title: '京东到家', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 6, title: '京东中心', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 7, title: '附近好点', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 8, title: 'PLUS会员', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 9, title: '京东国籍', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 0, title: '京东拍卖', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' }
]

</script>
<style scoped lang="scss">
  .gridBox{
    margin-top: 10px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 180px;
  }
  ::v-deep .van-grid-item__content--center{
    background-color: #f6f6f6;
  }
</style>